<template>
  <div>
    <group-title>积分操作</group-title>
    <grid v-show='TMArea'>
      <grid-item label="积分申请" link="/tabbar/apply1">
        <img slot="icon" src="../assets/demo/add.png">
      </grid-item>
      <grid-item label="申请记录" link="/tabbar/myapply">
        <img slot="icon" src="../assets/demo/data.png">
      </grid-item>
      <!-- <grid-item label="积分悬赏" link="/tabbar/apply1">
        <img slot="icon" src="../assets/demo/news.png">
      </grid-item> -->
    </grid>
    <grid v-show='TLArea'>
      <grid-item label="积分审核" link="/tabbar/score-status">
        <img slot="icon" src="../assets/demo/edit.png">
      </grid-item>
      <grid-item label="积分查询" link="/tabbar/myapply">
        <img slot="icon" src="../assets/demo/data.png">
      </grid-item>
    </grid>
    <grid v-show='AdminArea'>
      <grid-item label="额外分审核" link="/tabbar/score-status-ad">
        <img slot="icon" src="../assets/demo/edit.png">
      </grid-item>
    </grid>
 <!--    <group>
      <cell title="本月小组排名" link="/tabbar/rank?sel=2">
        <span class="demo-icon" slot="icon" style="color:#F70968">&#xe633;</span>
      </cell>
      <cell title="本季度排名" link="/tabbar/rank?sel=1">
        <span class="demo-icon" slot="icon" style="color:red;">&#xe630;</span>
      </cell>
    </group> -->
    <group>
      <cell title="绩效管理"
        is-link
        :border-intent="false"
        :arrow-direction="showContent001 ? 'up' : 'down'"
        @click.native="showContent001 = !showContent001">
        <span class="demo-icon" slot="icon"><img src="../assets/demo/数据汇总.png"></span></cell>
        <template v-if="showContent001">
          <div v-show="TMArea" style="font-size:14px;">
            <cell-box class="sub-item" link="/tabbar/ps"><div><img src="../assets/demo/空白.png"><span>月度自评</span></div></cell-box>
            <cell-box class="sub-item" link="/tabbar/ph"><div><img src="../assets/demo/空白.png"><span>历史绩效</span></div></cell-box>
          </div>
          <div v-show="TLArea" style="font-size:14px;">
            <cell-box class="sub-item" link="/tabbar/score-status-ps"><div><img src="../assets/demo/空白.png"><span>绩效审核</span></div></cell-box>
          </div>
          <div v-show="AdminArea" style="font-size:14px;">
            <cell-box class="sub-item" link="/tabbar/score-status-ps"><div><img src="../assets/demo/空白.png"><span>绩效分查看</span></div></cell-box>
          </div>
        </template>
    </group>
    <group v-show='AdminArea'>
      <cell title="录入分数" link="/tabbar/score-add" value="Star me">
        <span class="demo-icon" slot="icon" style="color:#35495e;">&#xe62d;</span>
      </cell>
    </group>
    <br>

  </div>
</template>

<script>
import { Cell, CellBox, Group, Badge, Divider, Grid, GridItem, GroupTitle } from 'vux'

const pkg = require('../../package.json')
const version = pkg.version
const vueVersion = pkg.devDependencies.vue

export default {
  components: {
    Cell,
    CellBox,
    Group,
    Badge,
    Divider,
    Grid, 
    GridItem, 
    GroupTitle 
  },
  data () {
    var ms_staffId = localStorage.getItem('ms_staffId')
    return {
      version,
      vueVersion,
      staffIdOnLogin: ms_staffId,
      groupType: '',
      TMArea: false,
      TLArea: false,
      AdminArea: false,
      showContent001: false
    }
  },
  mounted: function () {
    this.getAuthority()
  },
  methods: {
    getAuthority: function () {
      var self = this
      self.$ajax({
        method: 'get',
        url: '../wx/auth',
        params: {
          staffId: self.staffIdOnLogin
        }
      })
      .then(function (res) {
        self.groupType = res.data[0].groupName
        if (self.groupType == 'TM') {
          self.TMArea = true
        }else if (self.groupType == 'TL') {
          self.TLArea = true
        }else{
          self.AdminArea = true
        }
      })
      .catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less">
.my-img {
float:left;
  max-width: 30%;
}
.center {
  margin-top: 15px;
  text-align: center;
}
.vux-notice {
  color: #666;
  line-height: 40px;
}
.demo-icon {
  margin-right: 15px;
}
.vux-title {
  vertical-align: middle;
  text-align: center;
  color: #04BE02;
  display: inline-block;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
}
body {
  font-family: Helvetica, sans-serif;
  background-color: #fbf9fe;
}
.demo-tip {
  background-color: #fefcec;
  color: #f76a24;
  font-size: 12px;
  padding: 5px 10px;
  margin-top: 15px;
}
</style>
